<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>倒计时</title>
  <style>
    body {
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div class="timer timer1">
    <h2>倒计时1</h2>
    <div class="setting">
      <span>设置倒计时剩余毫秒数</span>
      <input type="number" style="width:50px">
      <span>毫秒</span>
      <button onclick="timer1.setMilliseconds(+input1.value||0)">设置</button>
    </div>
    <div class="dashboard"></div>
    <div class="controls">
      <button onclick="timer1.start()">开始</button>
      <button onclick="timer1.stop()">暂停</button>
      <button onclick="timer1.reset()">重置</button>
    </div>
  </div>

  <div class="timer timer2" style="margin-top:40px">
    <h2>倒计时2</h2>
    <div class="setting">
      <span>设置倒计时剩余毫秒数</span>
      <input type="number" style="width:50px">
      <span>毫秒</span>
      <button onclick="timer2.setMilliseconds(+input2.value||0)">设置</button>
    </div>
    <div class="dashboard"></div>
    <div class="controls">
      <button onclick="timer2.start()">开始</button>
      <button onclick="timer2.stop()">暂停</button>
      <button onclick="timer2.reset()">重置</button>
    </div>
  </div>

  <script src="js/countdown-timer.js"></script>
  <script>
    var dashboard1 = document.querySelector('.timer1 .dashboard');
    var input1 = document.querySelector('.timer1 input');
    var updateDashboard1 = function (obj) {
      d = obj.dhmsms;
      dashboard1.innerHTML = `${d.d}天${d.h}时${d.m}分${d.s}秒${d.ms}毫秒`;
    };
    var timer1 = new CountdownTimer({
      milliseconds: +input1.value || 0, // 倒计时毫秒数
      interval: 50, // 倒计时间隔毫秒数
      oninit(obj) { // 倒计时初始化回调
        updateDashboard1(obj);
      },
      onreset(obj) { // 倒计时重置回调
        updateDashboard1(obj);
      },
      oneach(obj) { // 倒计时每次间隔回调
        updateDashboard1(obj);
      },
      onstart(obj) { // 倒计时开始回调
        updateDashboard1(obj);
      },
      onend(obj) { // 倒计时结束回调
        updateDashboard1(obj);
      },
    });

    var dashboard2 = document.querySelector('.timer2 .dashboard');
    var input2 = document.querySelector('.timer2 input');
    var updateDashboard2 = function (obj) {
      d = obj.dhms;
      dashboard2.innerHTML = `${d.d}天${d.h}时${d.m}分${d.s}秒`;
    };
    var timer2 = new CountdownTimer({
      milliseconds: +input2.value || 0, // 倒计时毫秒数
      interval: 50, // 倒计时间隔毫秒数
      oninit(obj) { // 倒计时初始化回调
        updateDashboard2(obj);
      },
      onreset(obj) { // 倒计时重置回调
        updateDashboard2(obj);
      },
      oneach(obj) { // 倒计时每次间隔回调
        updateDashboard2(obj);
      },
      onstart(obj) { // 倒计时开始回调
        updateDashboard2(obj);
      },
      onend(obj) { // 倒计时结束回调
        updateDashboard2(obj);
      },
    });
  </script>
</body>

</html>